<template>
  <div>
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>注册账户姓名/账号</p>
          <el-input v-model="selectedMsg.Filter" placeholder="请输入注册账户姓名/账号" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>注册团体名称</p>
          <el-input v-model="selectedMsg.OrganizationUnitFilter" placeholder="请输入团体注册名称" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>状态</p>
          <el-select v-model="selectedMsg.IsEnabled" size="mini" placeholder="请选择状态" filterable @change="getPageList()">
            <el-option :value="null" label="全部" />
            <el-option :value="true" label="启用" />
            <el-option :value="false" label="禁用" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4" class="search_btn">
          <el-button type="primary" size="mini" @click="getPageList()">筛选</el-button>
          <el-button type="warning" size="mini" @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="loading" class="gl_table_noBorder" :data="tableData" size="mini">
      <el-table-column type="index" label="序号" :width="50" align="center" />
      <el-table-column prop="phoneNumber" label="注册账户" :min-width="150" />
      <el-table-column prop="name" label="个人注册姓名" :min-width="150" />
      <el-table-column label="团体注册名称" :min-width="300">
        <template slot-scope="{ row }">
          <span v-for="(item, index) in row.organizationNames" :key="index">{{ item + (index === row.organizationNames.length -1 ? '' : ', ') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" :min-width="100">
        <template slot-scope="{ row }">
          {{ row.isEnabled === true ? '启用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="clickEdit(row)">编辑</el-button>
          <el-button v-if="row.isEnabled === true" size="mini" type="text" @click="changeStatus(row, 'disable')">禁用</el-button>
          <el-button v-else size="mini" type="text" @click="changeStatus(row, 'enable')">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row class="gl_mt_15" style="text-align: right;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="selectedMsg.MaxResultCount"
        :current-page="selectedMsg.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <change-password ref="changePassword" :current-register="registerId" />
  </div>
</template>

<script>
import changePassword from './changePassword.vue';
import {
  api_GET_UsersUserOrganizations, // 分页获取注册账户
  api_PUT_UsersIdEnable, // 启用账户
  api_PUT_UsersIdDisable // 禁用账户
} from '@/extend/api/base.js';
export default {
  components: { changePassword },
  data() {
    return {
      total: 0,
      selectedMsg: {
        Filter: '',
        OrganizationUnitFilter: '',
        IsEnabled: null,
        IncludeOrganizationUnits: true,
        Page: 1,
        MaxResultCount: 10,
        SkipCount: 0
      },
      loading: false,
      tableData: [],
      registerId: ''
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    // 获取数据
    getPageList(page) {
      this.selectedMsg.Page = page || 1;
      this.selectedMsg.SkipCount = (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount;
      this.loading = true;
      api_GET_UsersUserOrganizations(this.selectedMsg).then(res => {
        this.loading = false;
        this.tableData = res.items;
        this.total = res.totalCount;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    clickEdit(row) {
      this.$refs.changePassword.dialogVisible = true;
      this.registerId = row.id;
    },
    // 禁用与启用
    changeStatus (row, status) {
      const that = this;
      this.$confirm(`您确定要${status === 'disable' ? '禁用' : '启用'}用户${row.name}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: status === 'disable' ? 'warning' : 'success'
      })
        .then(() => {
          if (status === 'enable') {
            that.enableUser(row);
          } else {
            that.disableUser(row);
          }
        })
        .catch(() => {
        });
    },
    enableUser(row) {
      this.loading = true;
      api_PUT_UsersIdEnable(row.id).then(res => {
        this.loading = false;
        this.getPageList();
        this.$message({ type: 'success', message: '启用成功' });
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    disableUser(row) {
      this.loading = true;
      api_PUT_UsersIdDisable(row.id).then(res => {
        this.loading = false;
        this.getPageList();
        this.$message({ type: 'success', message: '禁用成功' });
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    reset() {
      this.selectedMsg = {
        Filter: '',
        OrganizationUnitFilter: '',
        IsEnabled: null,
        IncludeOrganizationUnits: true,
        Page: 1,
        MaxResultCount: 10,
        SkipCount: 0
      };
      this.getPageList();
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.selectedMsg.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>

<style scoped>
</style>
